<template>
     <div class="topbar">
    <div class="logobox">
      <h1>智慧信访平台</h1>
    </div>
    <div class="navbarbox">
      <ul class="nav">
       <li><a @click="pageToHome">首页</a></li>
       <li><a href="#government">政务公开</a></li>
       <li><a href="#affairs">事务办理</a></li>
       <li><a href="#interaction">交流互动</a></li>
       <li><a @click="pageToVideoTalk">联系我们</a></li>
      </ul>
    </div>
    <div class="loginbox">
      <ul class="login-nav" v-if="isLogin">
       <li><a href="#no">无障碍</a></li>
       <li><a @click="pageToLogin">登录</a></li>
       <li><a @click="pageToRegister">注册</a></li>
       <li><a href="https://www.gov.cn/">中国政府网</a></li>
      </ul>
      <ul class="login-nav" v-else>
       <li><a href="#no">无障碍</a></li>
       <li><a @click="pageToInfo">个人中心</a></li>
       <li><a @click="logout">退出登录</a></li>
       <li><a href="https://www.gov.cn/">中国政府网</a></li>
      </ul>
    </div>
    </div>
 
</template>
    
<script setup>
import router from '@/router';
import { useTokenStore } from "@/stores/token";
import { ElMessage } from "element-plus";
import leadermsg from '@/components/leadermsg.vue'

const isLogin = ref(true);

//判断是否登陆
const tokenStore = useTokenStore();
if(tokenStore.token){
  isLogin.value = false;
  console.log(tokenStore.token)
}

import { usePhoneStore } from '@/stores/phone'

const phoneStore = usePhoneStore();

//退出登录
const logout = ()=>{
  tokenStore.removeToken();
  phoneStore.removePhone();
  isLogin.value = true;
  router.push('./');
  ElMessage.success("您已退出登录");
}





//页面跳转相关函数

//登陆注册
const pageToLogin =()=>{

  router.push('./login');
}
//
const pageToRegister=()=>{

  router.push('./login')
}

const pageToInfo=()=>{
  router.push('./info')
}


const pageToHome=()=>{
  router.push('./')
}

const pageToVideoTalk=()=>{
  router.pageToHome('/videoTalk')
}


</script>

<style>
.topbar{
  background-color: #0163d1;
  height: 12%;
  width: 100%;
  position: absolute;
  top: 0%;
  display: flex;
}
.logobox{
  height: 100%;
  margin-left: 3%;
  width:25%;
}
.logobox h1{
  font-size:45px;
  font-weight: 900;
  color: white;
  margin-top:2%;
  margin-left: 6%;
  letter-spacing: 12px;
}


.navbarbox{
  
  width:40%;
  height: 100%;
  margin-left:5%;
  padding-top: 2%;
  font-weight: 500;
}

/* 导航条样式 */
  .nav {
    display: flex;
    justify-content: center;
    list-style-type: none; /* 移除列表项的默认样式 */
    padding: 0;
    
  }

  /* 导航项样式 */
  .nav li {
    padding: 10px 20px; /* 导航项内边距 */
  }

  /* 链接样式 */
  .nav a {
    text-decoration: none; /* 移除下划线 */
    color: #f5f2f2; /* 字体颜色 */
    font-size: 20px; /* 增大默认字体大小 */
    font-weight: bold; /* 字体加粗 */
    transition: font-size 0.3s, font-weight 0.3s;
  }

  /* 鼠标悬停效果 */
  .nav a:hover {
    font-size: 25px; /* 鼠标悬停时字体变大 */
    font-weight: bolder;
  }

.loginbox{
  width:25%;
  height: 100%;
  margin-left:2%;
}
/* 导航项样式 */
.login-nav li {
    padding: 5px 10px; /* 导航项内边距 */
  }
.login-nav{
    display: flex;
    justify-content: center;
    list-style-type: none; /* 移除列表项的默认样式 */
    padding: 0;
    margin-top:10%;
    transition: font-size 0.5s, font-weight 0.5s;
}
.login-nav a {
    text-decoration: none; /* 移除下划线 */
    color: #f5f2f2; /* 字体颜色 */
    font-size: 16px; /* 增大默认字体大小 */
    font-weight: normal; /* 字体加粗 */
  }
/* 鼠标悬停效果 */
.login-nav a:hover {
    font-size: 20px; /* 鼠标悬停时字体变大 */
    font-weight: bold;
  }

</style>